//重置样式
require('../../assets/css/index.less')

//引入weui库
require('../../assets/lib/weui/weui.css')
let weui = require('../../assets/lib/weui/weui.js')
console.log(weui);

//引入echarts库
import * as echarts from 'echarts';

//当前页面样式
require('./sportsdata.less')

//引入字体库
require('../../assets/fonts/iconfont.css')

//引入dom
const dom = require('../../utils/dom.js')

//引入https
const https = require('../../utils/https.js')




dom.reday(function () {
    //点击退回上一页
    dom.getEvent('#comeBack', function () {
        history.go(-1)
    })

    //动态渲染头部数据 运动数据
    https.get('/api/exercise',function(res){
        let {errno,data}=res
        console.log(data);
        dom.getEle('#time').textContent=data.sum7Duration
        dom.getEle('#sproData').textContent=data.sum7Calorie
        dom.getEle('#sproData').textContent=data.sum7Calorie
    })







    //获取运动数据
    function getSportsData() {
        https.get('/api/exercise', function (res) {
            console.log(res);
            let { errno, data } = res
            if (errno == 0) {
                //获取日期
                let days = data.days.map(v => {
                    return v.date.slice(5)
                })

                //获取7天时长
                let sumDate = data.days.map(v => {
                    return v.sumDuration
                })


                //调用柱状
                getBar(days, sumDate)
                //调用饼状
                getSec()
            }
        })
    }
    getSportsData()


    //柱状
    function getBar(date, sumD) {
        //初始化库容器
        let myColumnar = echarts.init(dom.getEle('#columnar'));//柱状
        let option = {
            title: {
                text: '近7天运动时长',
                itemGap: '40px',
                textStyle: {
                    fontSize: 14,
                    fontStyle: 'normal',
                    fontWeight: 'normal',
                },
                left: '15',
                top: '15',
            },
            grid: {
                left: '5%',//左边空闲3%
                right: '6%',//右边空闲4%
                bottom: '5%',//底部空闲 3%
                top: '27%',//顶部空闲25% 用于展示标题 和图例，这里就是我们本文要调整的数据。
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: date
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: sumD,
                    type: 'bar'
                }
            ]
        };
        myColumnar.setOption(option)
    }


    //扇形图
    function getSec() {
        let mySector = echarts.init(dom.getEle('#sector'));//扇形
        let sectorOption = {
            title: {
                text: '运动分类',
                left: '15',
                top: '15',
                textStyle: {
                    fontSize: 14,
                    fontStyle: 'normal',
                    fontWeight: 'normal',
                },
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                y: 'center',
                padding: [0, 0, 0, 22]

            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    //去除线条
                    label: {
                        normal: {
                            show: true,
                            position: "inside", //outside 外部显示  inside 内部显示
                            formatter: `{d}%`,
                            color: "#ffffff", //颜色
                            fontSize: 12 //字体大小
                        }
                    },
                    data: [
                        { value: 1048, name: '跑步' },
                        { value: 735, name: '骑行' },
                        { value: 580, name: '训练' },
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        mySector.setOption(sectorOption)

    }



})